<template>
  <div class="zhichupeizhi">
    <!-- <div class="powertop">
     <router-link class="powertopli " to="/yongjinzhichu/zhichuguanli"  v-if="checkquanxian('V0201').length > 0">支出订单管理</router-link>
     <router-link class="powertopli " to="/yongjinzhichu/yongjinzhichu"  v-if="checkquanxian('V0202').length > 0">佣金支出</router-link>
     <router-link class="powertopli " to="/yongjinzhichu/zhichudakuanshenhe" v-if="peizhi.second_commission_examine && checkquanxian('V0204').length > 0">支出审核</router-link>
     <router-link class="powertopli " to="/yongjinzhichu/zhichudakuan"  v-if="checkquanxian('V0203').length > 0">支出打款</router-link>

     <router-link class="powertopli powertopact" to="/yongjinzhichu/zhichupeizhi" v-if="zhichupeizhi">支出配置</router-link>
     <router-link class="powertopli " to="/yongjinzhichu/yongjinzhichubaobiao" v-if="checkquanxian('V0205').length > 0">佣金支出报表</router-link>
    </div> -->
    <top2 ref="top2"></top2>
    <div v-loading='loading' style="padding: 20px;">
      <div style="margin-bottom: 20px; background: rgb(248, 248, 248); border: 1px rgb(240, 240, 240) solid; padding: 20px;">
        <div class="kflexc" style="margin-bottom: 20px;">
          <div style="margin-right: 20px;">以收定支</div>
          <div><el-switch v-model="all.income_and_expend" @change="gengxin" :active-value="1" :inactive-value="0" active-color="#409eff" inactive-color="#666"></el-switch></div>
        </div>
        <div>订单有收入才可以支出佣金，最严谨的一种方式，开启该选项必须在财务管理-佣金报表中导入佣金收入才可用</div>
      </div>
      <div style="margin-bottom: 20px; background: rgb(248, 248, 248); border: 1px rgb(240, 240, 240) solid; padding: 20px;">
        <div class="kflexc" style="margin-bottom: 20px;">
          <div style="margin-right: 20px;">客户经理数据加密</div>
          <div><el-switch v-model="all.cm_only" @change="gengxin" :active-value="1" :inactive-value="0" active-color="#409eff" inactive-color="#666"></el-switch></div>
        </div>
        <div>当您存在多个分销业务人员时可开启，客户经理只能看到自己所属的分销商订单明细，无法查看其他客户经理负责的分销商订单明细</div>
      </div>
      <div style="margin-bottom: 20px; background: rgb(248, 248, 248); border: 1px rgb(240, 240, 240) solid; padding: 20px;">
        <div class="kflexc" style="margin-bottom: 20px;">
          <div style="margin-right: 20px;">修改支出金额只能低于原金额</div>
          <div><el-switch v-model="all.change_commission_bigger" @change="gengxin" :active-value="1" :inactive-value="0" active-color="#409eff" inactive-color="#666"></el-switch></div>
        </div>
        <div>在支出管理页面修改佣金时，只允许改低不允许改高，修改的金额高于原佣金金额时会报错</div>
      </div>

      <div style="margin-bottom: 20px; background: rgb(248, 248, 248); border: 1px rgb(240, 240, 240) solid; padding: 20px;">
        <div class="kflexc" style="margin-bottom: 20px;">
          <div style="margin-right: 20px;">调整佣金只能扣罚不能奖励</div>
          <div><el-switch v-model="all.punish_only" @change="gengxin" :active-value="1" :inactive-value="0" active-color="#409eff" inactive-color="#666"></el-switch></div>
        </div>
        <div>针对佣金支出页的佣金奖励和扣罚，开启后员工使用佣金扣罚时将无法奖励代理商</div>
      </div>

      <div style="margin-bottom: 20px; background: rgb(248, 248, 248); border: 1px rgb(240, 240, 240) solid; padding: 20px;">
        <div class="kflexc" style="margin-bottom: 20px;">
          <div style="margin-right: 20px;">开启佣金支出审核</div>
          <div><el-switch v-model="all.second_commission_examine" @change="gengxin" :active-value="1" :inactive-value="0" active-color="#409eff" inactive-color="#666"></el-switch></div>
        </div>
        <div>一个佣金支出白名单，只有维护在白名单中的订单才可被支出佣金，开启该选项后您将会多出一个“支出审核”的tap页，您可在权限管理处设置谁拥有“支出审核”页面权限。</div>
      </div>


    </div>
  </div>
</template>

<script>
  import top2 from './top.vue'
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import moment from "moment";
  import XLSX from 'xlsx';
  import daizhichujilu from './jilu/daizhichujilu.vue'
  import yizhichujilu from './jilu/yizhichujilu.vue'
  import {
      read,utils
    } from 'xlsx'

  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot,
      daizhichujilu,
      yizhichujilu,
      top2
    },
    name: "zhichupeizhi",
    data() {
      return {
        act:1,
        all:{
          value:""
        },
        loading:false,
        peizhi:"",
        zhichupeizhi:false

      }
    },
    created() {

      if(JSON.parse(localStorage.getItem('USER')).id == JSON.parse(localStorage.getItem('SHOP')).shop_id){
        this.zhichupeizhi = true
      }

      this.huoqu()

    },
    mounted() {

    },
    methods: {
      huoqu:function(){
        axios.get('/api/plan-market/expend/shopConfigInfo')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.all = response.data.data
              this.peizhi = response.data.data

              localStorage.setItem('shopConfigInfo',JSON.stringify(response.data.data))

              this.$refs.top2.getp()

              this.loading = false
            } else {
              this.loading = false
              this.$message.error(response.data.msg.info);
            }
        })
      },
      gengxin:function(){
        this.loading = true
        axios.post('/api/plan-market/expend/shopConfigUpdate',this.all)
          .then(response => {
            if (response.data.msg.code == 0) {

              this.huoqu()
            } else {
              this.loading = false
              this.$message.error(response.data.msg.info);
            }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .zhichupeizhi {
    .lia{ padding: 10px 0; margin: 0 15px; border-bottom: 3px rgb(255, 255, 255) solid; cursor: pointer; color: rgb(51, 51, 51);}
    .acts{ border-bottom: 3px #2974FF solid;}
    .powertop {
    	display: flex;
    	background:#f9f9f9;
    }
    .powertopli {
    	flex-basis: 180px;
    	line-height: 50px;
    	border-bottom: 3px #F9F9F9 solid;
    	color: #727272;
    	border-right: 1px #F9F9F9 solid;
    	font-size: 16px;
    	text-align: center;
    }
    .router-link-active {
    	background: #FFFFFF;
    	border-bottom: 3px #2974FF solid;
    }
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}

    /deep/ .el-table th{ background: rgb(246, 246, 246);}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
    /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--mini{ padding: 6px 15px !important;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .team {
    	background: #F9F9F9;
    }
  }
</style>
